<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <!-- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> -->
</head>

<body>
  <canvas id="c1" width="600" height="600"></canvas>
  <canvas id="c2" width="474" height="474"></canvas>
</body>
<script>
  let c1 = document.querySelector('#c1')
  let c2 = document.querySelector('#c2')
  let c1Cxt = c1.getContext('2d')
  let c2Cxt = c2.getContext('2d')
  let img = new Image()
  img.src = './img/OIP-C23.jpg'
  img.onload = function () {
    c1Cxt.drawImage(img, 0, 0)
    let imgData = c1Cxt.getImageData(0, 0, 784, 10)
    let imgDatas = imgData.data.length
    let imgData2 = c2Cxt.createImageData(50, 50)
    for (let i = 0; i < imgDatas; i++) {
      imgData2.data[i] = imgData.data[i]
    }
    c2Cxt.putImageData(imgData2, 0, 0, 0, 0, 50, 50)
  }
  // putImageData (图片对象, 坐标偏移量x，坐标偏移量y，画布上的位置x,画布上的位置y,宽度 , 高度)
  // getImageData( 起始坐标偏移量x，起始坐标偏移量y,宽度 , 高度)
</script>

</html>